<template>
  <view class="main">
    <view class="top_header">
      <swiper
        class="swiper"
        :indicator-dots="false"
        :current="activeIndex"
        :duration="300"
        :disable-programmatic-animation="true"
        :style="{ height: 686 * ratio + 'rpx' }"
        @change="onSwiperChange"
      >
        <swiper-item
          class="swiper_item"
          v-for="(item, index) in imgList"
          :key="index"
        >
          <view class="img" @click="previewImg(index)">
            <image
              :src="item"
              class="img-img"
              :style="{ height: 686 * ratio + 'rpx' }"
              :mode="index == 0 ? 'scaleToFill' : 'aspectFit'"
            >
            </image>
          </view>
        </swiper-item>
      </swiper>
      <view class="img_num">{{ activeIndex + 1 }}/{{ imgList.length }}</view>
    </view>

    <view class="info">
      <view class="top">
        <image
          class="icon"
          v-if="modelInfo.type == 'WORD'"
          src="/static/img/model/word_icon.png"
        ></image>
        <image
          class="icon"
          v-if="modelInfo.type == 'PPT'"
          src="/static/img/model/ppt_icon.png"
        ></image>
        <image
          class="icon"
          v-if="modelInfo.type == 'EXCEL'"
          src="/static/img/model/exl_icon.png"
        ></image>
        <image
          class="icon"
          v-if="modelInfo.type == 'PDF'"
          src="/static/img/model/pdf_icon.png"
        ></image>
        <image
          class="icon"
          v-if="modelInfo.type == 'ZIP'"
          src="/static/img/model/zip_icon.png"
        ></image>
        <view class="list_title">{{ modelInfo.title }}</view>
      </view>
      <view class="bottom">
        <view class="tag">文件类型：{{ modelInfo.type }}</view>
        <view class="tag">上传时间：{{ modelInfo.push_date }}</view>
      </view>
    </view>

    <view class="xgtj">
      <view class="xgtj-title"> 相关推荐 </view>
      <view class="xgtj-list">
        <view
          class="xgtj-item"
          v-for="(item, index) in xgtjList"
          :key="index"
          @click="xgtjClick(item)"
        >
          <image :src="item.pic" mode="aspectFill"></image>
          <view class="xgtj-name">
            {{ item.title }}
          </view>
        </view>
      </view>
    </view>
    <view style="height: 146rpx"> </view>
    <view class="btn" v-if="downloadFlag" @click="previewModel">查看模版</view>
    <view class="btn" v-if="!downloadFlag" @click="downloadModel(1)"
      >查看模版</view
    >


		<!-- 完成任务弹窗 -->
    <pointsTips
      v-if="showPointsTips"
      :title="pointsObj.name"
      :points="pointsObj.amount"
    ></pointsTips>
  </view>
</template>
<script
  type="text/javascript"
  src="plus-confusion://../pages/model/modelInfo/index"
></script>

<style lang="scss" scoped>
.main {
  background: #f6f6f6;
  min-height: 100vh;

  .top_header {
    position: relative;

    .swiper {
      padding-top: 20rpx;

      .swiper_item {
        .img {
          margin: 0 auto;
          width: 686rpx !important;

          .img-img {
            width: 686rpx;
            background-color: rgba(0, 0, 0, 0.8);
          }
        }
      }
    }

    .img_num {
      padding: 0 10rpx;
      position: absolute;
      top: 30rpx;
      right: 130rpx;
      text-align: center;
      height: 37rpx;
      font-size: 26rpx;
      line-height: 37rpx;
      background: #b9b9b9;
      border-radius: 76rpx;
      color: #fff;
    }
  }

  .info {
    width: 686rpx;
    margin: 28rpx auto;
    background: #fff;
    padding: 28rpx;
    border-radius: 8rpx;

    .top {
      display: flex;

      .icon {
        width: 38rpx;
        height: 36.5rpx;
        margin-right: 20rpx;
      }

      .list_title {
        width: 93%;
      }
    }

    .bottom {
      width: 100%;
      margin-top: 40rpx;
      display: flex;
      justify-content: space-between;
      font-size: 28rpx;

      .tag {
        min-width: 312rpx;
      }
    }
  }

  .btn {
    width: 686rpx;
    height: 90rpx;
    line-height: 90rpx;
    background: #1c87f3;
    margin: 28rpx auto;
    text-align: center;
    position: fixed;
    bottom: 0;
    left: 32rpx;
    border-radius: 132rpx;
    color: #fff;
  }
}

.xgtj {
  width: 686rpx;
  margin: 0 auto;
  border-radius: 8rpx;
  background-color: #fff;
  box-sizing: border-box;
  padding: 28rpx;
}

.xgtj-list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top: 30rpx;
  .xgtj-item {
    width: 298rpx;
    image {
      width: 298rpx;
      height: 185rpx;
      border: 1rpx solid #e4e7ed;
    }
    .xgtj-name {
      margin: 20rpx 15rpx 30rpx;
      text-align: center;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
</style>
